<!DOCTYPE html>
<html lang="en">
	<head>
		<meta charset="UTF-8">
		<meta name="viewport" content="width=device-width, initial-scale=1.0">
		<title>Document</title>
		<style>
			* {
				margin: 0;
				padding: 0;
			}

			body {
				position: relative;
			}

			img {
				position: absolute;
			}
		</style>
	</head>
	<body>
		<div align="center"><img src="./images/black.png" alt="picture" /></div>
		<script>
			let oImg = document.getElementsByTagName("img")[0];
			let offsetX, offsetY;
			let drag = 0;
			oImg.onmousedown = function(e) {
				e.preventDefault();
				drag = 1;
				offsetX = e.offsetX;
				offsetY = e.offsetY;
			}
			document.onmousemove = function(e) {
				e.preventDefault();
				if (drag == 1) {
					oImg.style.left = (e.pageX - offsetX) + "px";
					oImg.style.top = (e.pageY - offsetY) + "px";
				}
			}
			oImg.onmouseup = function(e) {
				e.preventDefault();
				drag = 0;
			}
		</script>
	</body>
</html>